<template>
	<view class="container">
		<view class="category-tabs">
			<text class="tab" :class="{active: activeTab === 'fixed'}" @click="switchTab('fixed')">
				固定试卷
			</text>
			<text class="tab" :class="{active: activeTab === 'timed'}" @click="switchTab('timed')">
				时段试卷
			</text>
		</view>

		<!-- 试卷列表 -->
		<scroll-view class="paper-list" scroll-y>
			<!-- 固定试卷内容 -->
			<block v-if="activeTab === 'fixed'">
				<uni-list>
					<uni-list-item v-for="item in fixedPapers" :key="item.id" :title="item.name"
						:note="`题数: ${item.questionCount} | 总分: ${item.score} | ${item.createTime}`"
						:show-arrow="false">
						<template v-slot:footer>
							<view class="start-btn" @click.stop="() => startExam(item.id)">开始答题</view>
						</template>
					</uni-list-item>
				</uni-list>
			</block>

			<!-- 时段试卷内容 -->
			<block v-else>
				<uni-list>
					<uni-list-item v-for="item in timedPapers" :key="item.id" :title="item.name"
						:note="`题数: ${item.questionCount} | 总分: ${item.score} | ${item.createTime}`"
						:show-arrow="false">
						<template v-slot:footer>
							<view class="start-btn" @click.stop="startExam(item.id)">开始答题</view>
						</template>
					</uni-list-item>
				</uni-list>
			</block>

			<view class="empty" v-if="showEmpty">
				<text>暂无数据</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import http from "../../http.js"
	export default {
		data() {
			return {
				activeTab: 'fixed', // 当前激活的标签
				fixedPapers: [],
				timedPapers: []
			}
		},
		computed: {
			showEmpty() {
				return this.activeTab === 'fixed' ?
					this.fixedPapers.length === 0 :
					this.timedPapers.length === 0
			}
		},
		onLoad() {
			this.getlist(),
				this.getlist2()
		},
		methods: {
			switchTab(tab) {
				this.activeTab = tab;
			},
			getlist() {
				http({
					url: "/api/student/exam/paper/pageList",
					method: "post",
					data: {
						paperType: 1, //试卷类型（1固定试卷，4时段试卷）
						subjectId: null, //学科id
						pageIndex: 1, //页数
						pageSize: 10 //每页条数
					}
				}).then(res => {
					console.log(res);
					this.fixedPapers = res.response.list
				})
			},
			getlist2() {
				http({
					url: "/api/student/exam/paper/pageList",
					method: "post",
					data: {
						paperType: 4, //试卷类型（1固定试卷，4时段试卷）
						subjectId: null, //学科id
						pageIndex: 1, //页数
						pageSize: 10 //每页条数
					}
				}).then(res => {
					console.log(res);
					this.timedPapers = res.response.list
				})
			},
			startExam(item) {
				console.log(item);
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}



	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.category-tabs {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eee;
	}

	.tab {
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 0;
		position: relative;
	}

	.tab.active {
		color: #007AFF;
		font-weight: bold;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
		background-color: #007AFF;
	}

	.paper-list {
		flex: 1;

	}

	.paper-item {
		margin-bottom: 5rpx;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.paper-title {
		font-size: 30rpx;
		color: #333;
		display: block;
	}

	.paper-subject {
		display: block;
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.paper-time {
		display: block;
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #FF6A00;
	}

	.empty {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
	}
</style>